/*
 * 合作伙伴管理视图
 * @Author: ljb 
 * @Date: 2017-11-27 15:23:38 
 * @Last Modified by: LuoQianJun
 * @Last Modified time: 2018-01-30 16:21:42
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-partner-views {
        padding: 20px;
    }

</style>
<template>
<div class="v-admin-partner-views">

    <!-- 面包屑组件 -->
    <vBreadcrumb :breadcrumbList="breadcrumbList"></vBreadcrumb>

    <Tabs type="card" @on-click="changeTab">
        <TabPane label="新增" name="新增">
            
            <!-- 合作伙伴登记组件 -->
            <partner-create ref="create"
                            @post="postData">
            </partner-create>

        </TabPane>
        <TabPane label="查看" name="查看">

            <!-- 搜索组件 -->
            <search-form  @search="confirmSearch"></search-form>
            
            <!-- 合作伙伴列表组件 -->
            <partner-index  :loading="table_loading"
                            :partners="partner_info.data"
                            @edit="watchPartnerDetail"
                            @delete="deletePartner"></partner-index>

            <br>

            <!-- 分页组件 -->
            <Row type="flex" justify="center">
                <Page @on-change="pageChange" 
                    @on-page-size-change="perPageChange"
                    placement="top"
                    :total="partner_info.total" 
                    :current="partner_info.current_page"
                    :page-size="query_info.per_page"
                    show-sizer show-total></Page>
            </Row>

        </TabPane>
    </Tabs>

    <Modal title="修改合作伙伴"
            v-model="show_modal">

        <!-- 合作伙伴编辑组件 -->
        <partner-edit   :partner-detail="partner_detail"
                        @update="updatePartner"></partner-edit>

        <div slot="footer"></div>

    </Modal>

</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import vBreadcrumb from 'src/views/component/breadcrumb';

import { mapGetters , mapMutations } from "vuex";

import partnerCreate from './create';
import partnerIndex from './index';
import partnerEdit from './edit';
import searchForm from './search-form';

import qs from 'qs';

export default {
    name: 'partner',
    components : {
        vBreadcrumb,
        partnerCreate,
        partnerIndex,
        partnerEdit,
        searchForm
    },
    data() {	
        return {
            breadcrumbList: [
                {
                    name : '管理员',
                    href : '#',
                },
                {
                    name : '合作伙伴',
                    href : '#',
                }
            ],

            query_info : {

                page : 1,

                per_page : 20,

                name : ''

            },                      //搜索信息

            search_info : {
                page : 1
            },                      //分页信息

            table_loading : false,      //表格更新时的loading

            show_modal : false,         //弹框的控制

            partner_detail : {},        //合作伙伴详情

            partner_info : {}          //合作伙伴信息

        }
    },
    computed: {
        ...mapGetters('userToken',[
            'getToken'
        ])  
    },
    methods: {

        ...mapMutations('spinShow',[
            'showSpin',
            'closeSpin'
        ]),

        /**
         * 切换tab
         * @param  {tab_name} tab_name {tab的name}
         * @return {undefined} 
         */
        changeTab(tab_name) {
            
            if( tab_name === '查看' ) {

                this.fetchPartnerList(this.query_info);

            }else {

                this.partner_info.data = [];

            }

        },

        /**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
        confirmSearch(param) {

            this.query_info.name = param.name;

            this.search_info = JSON.parse(JSON.stringify(this.query_info));

            this.fetchPartnerList(this.query_info);

        },

        /**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined} 
         */
        pageChange(pageNumber) {

            this.search_info.page = pageNumber;

            this.search_info.per_page = this.query_info.per_page;

            this.fetchPartnerList(this.search_info);
        },

        /**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
        perPageChange(per_page) {

            this.search_info.per_page = per_page;

            this.query_info.per_page = per_page;

            this.fetchPartnerList(this.search_info);

        },

        /**
         * 查看合作伙伴详情
         * @param  {string} id {合作伙伴的id}
         * @return {undefined}
         */
        watchPartnerDetail(id) {

            this.partner_detail = this.partner_info.data.filter((partner) => partner.id === id)[0];

            this.show_modal = true;

        },

        /**
         * 更新合作伙伴信息
         * @param  {string} id {合作伙伴的id}
         * @return {undefined}
         */
        updatePartner(id,param){

            this.showSpin('请稍后');

            this.$http.post( API_LIST.PARTNER + '/' + id, param )
                .then(({ data })=>{
                            
                    if  ( parseInt(data.code) !== 0 )throw new Error(data.error);

                    this.$Message.success('更新成功！');

                    this.show_modal = false;

                    this.fetchPartnerList(this.search_info);
                            
                })
                .catch((err)=>{

                    this.$Message.error(err.message || err.statusText);
            
                })
                .then(this.closeSpin)

        },
        
        /**
         * 新增合作伙伴的post数据
         * @return {undefined}
         */
        postData(param){

            this.showSpin('请稍后');

            this.$http.post( API_LIST.PARTNER , param )
                    .then(({ data })=>{
                                
                        if( parseInt(data.code) !== 0 )throw new Error(data.error);

                        this.$Message.success('新增成功！');

                        this.$refs.create.handleReset('formValidate');
                                
                    })
                    .catch((err)=>{

                        this.$Message.error(err.message);
                
                    })
                    .then(this.closeSpin)

        },

        /**
         * 删除合作伙伴
         * @param  {string} id {需要删除的任务的id}
         * @return {undefined}
         */
        deletePartner(id){

            this.$Modal.confirm({
                title: '确定删除该合作伙伴么？',
                onOk: () => {

                    const param = {
                        _method : 'DELETE'
                    }

                    this.table_loading = true;

                    this.$http.post( API_LIST.PARTNER + '/' + id , param )
                        .then(({ data })=>{
                                    
                            if( parseInt(data.code) !== 0 )throw new Error(data.error);

                            this.fetchPartnerList(this.search_info);

                            this.$Message.success('删除成功');
                                    
                        })
                        .catch((err)=>{
                    
                            this.$Message.error(err.message || err.statusText);

                        })
                        .then(() => this.table_loading = false)
                    
                },
                onCancel: () => {}
            });

        },

        /**
         * 获取合作伙伴列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
        fetchPartnerList(param){

            this.table_loading = true;

            let query_str = qs.stringify(param);

            this.$http.get( API_LIST.PARTNER + '?' + query_str )
                .then(({ data })=>{
                            
                    if( parseInt(data.code) !== 0 )throw new Error(data.error);

                    this.partner_info = data.partners;
                            
                })
                .catch((err)=>{
            
                    this.$Message.error(err.message);

                })
                .then(() => this.table_loading=false)

        }

    }
}
</script>